<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>体侧数据</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 100%;
            height: 60px;
            line-height: 60px;
            overflow: hidden;
            background:  #2d3243;
            font-size: 14px;
            cursor: pointer;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .nav-con{
            margin-left: 30px;
            width: 90%;
            color: #FFFFFF;
            top: 0;
        }
        .content{
            height: 900px;
            background: #f7f7f8;
            margin-top: 0px;
        }
        .content-first{
            width: 95%;
            height: 60px;
            background: #fff;
            margin-left: 3%;
            /*margin-top: 10px;*/
        }
        .content-second{
            width: 95%;
            height: 800px;
            background: #fff;
            margin-left: 3%;
            margin-top: 30px;
        }
        .list-xiala{
            width: 100%;
            height: 34px;
            margin-top: 14px;
            margin-left: 20px;
            float: left;
        }
        .el-button{
            display: inline-block;
            width: 62px;
            height: 38px;
            background-color: #20a0ff;
            text-align: center;
            text-decoration: none;
            font-size: 13px;
            color: white;
            /*垂直居中*/
            line-height: 38px;
            margin-left: 8%;
            margin-top: 10px;
            overflow: hidden;
            margin-right: 0px;
        }
        .list{
            width: 1100px;
            height: 60px;
            border: 1px solid #eeeeee;
            background: #eee;
            margin: 20px 20px 0px 20px ;
            padding-top: 20px;
        }
        .list-con{
            width: 1100px;
            height: 500px;
            border: 1px solid #eeeeee;
            margin-left: 20px;
        }
        #name{
            font: 16px 微软雅黑;
            margin: 30px 0 400px 80px;
        }
        #name-male{
            font: 16px 微软雅黑;
            margin: 0px 0 100px 80px;
            float: left;
        }
        #name-female{
            font: 16px 微软雅黑;
            float: right;
            margin-right: 150px;
        }
        .footer{
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            color: #999;
            background: #f0f3f4;
            position: fixed;
            z-index: 100;
            /*left: 200px;*/
            bottom: 0;
            /*text-align: center;*/
        }
    </style>
</head>
<body>
    <div class="nav">
       <div class="nav-con">
           <span class="fl">数据统计</span>
           <span class="fr">关闭</span>
       </div>
    </div>
    <div class="content">
        <div class="content-first">
            <select class="form-control list-xiala" style="width: 222px;padding:5px;">
                <option>无数据</option>
            </select>
            <select class="form-control list-xiala" style="width: 222px;padding:5px;margin-left: 10px">
                <option>综合成绩</option>
                <option>BMI值</option>
                <option>肺活量</option>
                <option>50米跑</option>
                <option>立定跳远</option>
                <option>坐位体前屈</option>
                <option>引体向上（男）/仰卧体做（女）</option>
            </select>
            <select class="form-control list-xiala" style="width: 222px;padding:5px;margin-left: 10px">
                <option>全部年级</option>
                <option>2018级</option>
                <option>2017级</option>
                <option>2016级</option>
                <option>2015级</option>
                <option>2014级</option>
                <option>2013级</option>
            </select>
            <select class="form-control list-xiala" style="width: 222px;padding:5px;">
                <option>全部学院</option>
            </select>
            <button type="button" class="el-button fl">
                <span>筛选</span>
            </button>
        </div>
        <div class="content-second">
                <div class="list">
                    <div class="list-in">
                        <p>数据分析情况</p>
                    </div>
                </div>
            <div class="list-con">
                <p id="name">总体</p>
                <p id="name-male">男生</p>
                <p id="name-female">女生</p>
            </div>
        </div>
    </div>
    <div class="footer">
        <span  style="margin-left: 120px;">客服电话：400 800 9198</span>
        <span  style="margin-left: 80px;">ZHE JIANG WAN HANG INFORMATION TECHNOLOGY CO. LTD</span>
    </div>
</body>
</html>